<template>
	<!--首页图片 -->
	<view class="indexContainer">
		<!-- 点数头部 -->
		<view class="pointHead ">

			<!-- 订单状态 -->
			<view class="search-all flex-start-center">
				<view @click="showDelModify">
					{{filterName}}
					<uni-icons type="down" color='#333' size="30"></uni-icons>
				</view>
				<view class="search-content flex flex1">

					<image class="search-img" src="/static/sousuo.png"></image>
					<input :placeholder="'请输入搜索员工'+filterName" v-model="searchVal" @input="changeInput"
						@confirm="changeSearch" placeholder-style="color:#8F8F8F;" />
					<view @click="changeSearch" class="search-btn flex">搜索</view>
				</view>
			</view>



		</view>
		<!-- 充值点数 -->
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view v-for="(item,i) in list" :key="i" class="pointList flex-between">
				<view>
					<view class="pointName">
						{{item.staffName}}
					</view>
					<view class="flex">
						<view class="pointTime">
							电话 {{item.phone}}
						</view>
						<view class="pointTime">
							账号 {{item.staffCode}}
						</view>
					</view>
				</view>
				<view class="point" @click="pointPopUp(item)">
					<image class="pointImg" src="../../static/14.png" mode=""></image>
				</view>
			</view>
		</mescroll-body>
		<!-- 添加悬浮 -->
		<view class="suspension" @click="addEmployeeSuspension()">
			<image class="addIcon" src="../../static/addIcon.png" mode=""></image>
		</view>
		<sunui-popup ref="modifyActivity">
			<template v-slot:content>

				<!-- 关闭按钮进行定位 -->
				<view class="moreActiveButton">
					<view class="add" @click.stop="account('账号','staffCode')">
						账号
					</view>
					<view class="add" @click.stop="nickName('姓名','staffName')">
						姓名
					</view>
					<view class="add" @click.stop="phone('电话','phone')">
						电话
					</view>
				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="modifyEmployeeInfo">
			<template v-slot:content>

				<!-- 关闭按钮进行定位 -->
				<view class="moreActiveButton">
					<view class="delete" @click.stop="freeze(staffObject.id)">
						{{freezeTitle}}
					</view>
					<view class="add" @click.stop="edit(staffObject)">
						编辑
					</view>
					<view class="add" @click.stop="codyAccount(staffObject.staffCode)">
						复制账号
					</view>
					<view class="add" @click.stop="codyPhone(staffObject.phone)">
						复制电话
					</view>
					<view class="delete" @click.stop="deleteyEmployee(staffObject.id)">
						删除
					</view>
				</view>

			</template>
		</sunui-popup>
	</view>

</template>

<script>
	export default {
		data() {

			return {

				date: null,
				ContianPadding: 20,

				searchVal: '',
				// 商家id
				merchantId: uni.getStorageSync('merchantId'),

				windowHeight: '',
				list: [],

				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				// 筛选类型
				filterType: '',

				// 筛选名字
				filterName: '账号',

				form: {
					staffCode: null,
					staffName: null,
					phone: null
				},
				// 员工信息
				staffObject: null,

				// 员工冻结
				freezeStatus: 2,
				// 1 正常  2冻结   默认传2

				// 冻结状态
				freezeTitle: '冻结'

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 600;
				}
			});
			

		},

		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},

		onLoad() {

		},
		computed: {



		},
		methods: {

			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.staffList,
					data: {
						page: scroll.num,
						merchantId: this.merchantId,
						limit: 10,
						staffCode: this.form.staffCode,
						staffName: this.form.staffName,
						phone: this.form.phone
					}
				});
				if (result.code == 2000) {

					console.log('result.data', result.data);
					// this.mescroll.endByPage(result.data.list.length, 1);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					// this.mescroll.endByPage(result.data.list.length, 12);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

				}
			},



			// 显示修改删除按钮
			showDelModify() {
				// 显示下拉框
				this.$refs.modifyActivity.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},
			// 添加员工
			addEmployeeSuspension() {
				this.$sun.navGo('/pages/index/addEmployee')
			},
			account(name, type) {
				console.log(name, type)
				this.filterName = name
				this.filterType = type
				this.$refs.modifyActivity.close()
			},
			nickName(name, type) {
				this.filterName = name
				this.filterType = type
				this.$refs.modifyActivity.close()
			},
			phone(name, type) {
				this.filterName = name
				this.filterType = type
				this.$refs.modifyActivity.close()
			},
			changeInput(e) {
				console.log(e.detail.value)
				if (this.filterType == 'staffCode') {
					this.form.staffCode = e.detail.value ? e.detail.value : null
				} else if (this.filterType == 'staffName') {
					this.form.staffName = e.detail.value ? e.detail.value : null
				} else {
					this.form.phone = e.detail.value ? e.detail.value : null
				}

				this.mescroll.resetUpScroll();

			},
			//输入键盘的搜索
			changeSearch() {
				this.mescroll.resetUpScroll();
			},
			codyAccount(account) {
				
			 console.log(account)
				this.$refs.modifyEmployeeInfo.close()
				uni.setClipboardData({
				  data: account,
				  success: function() {
				    console.log('复制成功');
				  }
				})
			},
			deleteyEmployee(id) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除该员工吗？',
					success: async (res) => {
						if (res.confirm) {
							console.log(id)
							const result = await this.$http.post({
								url: this.$api.deleteStaff,
								data: {
									ids: [id]
								}
							});
							console.log(result)
							if (result.code == 2000) {
								this.$refs.modifyEmployeeInfo.close()
								this.$nextTick(() => {
									this.mescroll.resetUpScroll();
								})
								this.$sun.toast('删除成功', 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}


					}
				});


			},
			codyPhone(phone) {
				console.log(phone)
				this.$refs.modifyEmployeeInfo.close()
				uni.setClipboardData({
				  data: phone,
				  success: function() {
				    console.log('复制成功');
				  }
				})
			},
			edit(data) {
				console.log(data)
				this.$sun.navGo('/pages/index/addEmployee',data)
				this.$refs.modifyEmployeeInfo.close()
			},
			pointPopUp(obj) {

				this.staffObject = obj
				this.freezeTitle = this.staffObject.status == 2 ? '启用' : '冻结'
				this.freezeStatus = this.staffObject.status
				this.$refs.modifyEmployeeInfo.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});

			},
			async freeze(id) {
				const result = await this.$http.post({
					url: this.$api.staffUpdate,
					data: {
						id: id,
						status: this.staffObject.status==2?1:2
					},
				});
				if (result.code == 2000) {
					if (this.freezeStatus == 2) {
						this.freezeTitle = this.freezeStatus == 2 ? '启用' : '冻结'
						

						this.$refs.modifyEmployeeInfo.close()
						this.$nextTick(() => {
							
							this.mescroll.resetUpScroll();
							this.$sun.toast('启动成功')
						})

					} else {
						this.freezeTitle = this.freezeStatus == 2 ? '冻结' : '启用'
						this.freezeStatus == 2
					
						this.$refs.modifyEmployeeInfo.close()
						this.$nextTick(() => {
							this.mescroll.resetUpScroll();
								this.$sun.toast('冻结成功')
						})
					}
				} else {
					this.$sun.toast(result.msg)
				}

			}



		}
	}
</script>

<style lang="less" scoped>
	.flex-center() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	page {
		background-color: #f1f1f1;
	}

	.arrowImg {
		width: 32rpx;
		height: 32rpx;

	}


	.moreActiveButton {


		background-color: #fff;


		.add {
			height: 100rpx;
			color: #6568F6;
			font-size: 28rpx;
			font-family: Inter;

			.flex-center();
			border: 1px solid #f7f7f7;


		}

		.delete {
			.flex-center();
			height: 100rpx;


			color: #FF4636;
			font-size: 28rpx;
			font-family: Inter;
			box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
		}


	}

	.search-all {
		padding: 30rpx 20rpx;
		background: #fff;
		margin: 2rpx 0 0rpx;

		.search-content {
			margin-left: 10rpx;
			border-radius: 100rpx;
			background: #f9f9f9;
			height: 80rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx 0 30rpx;
			}

			input {
				flex: 1;
			}

			.search-btn {
				margin-left: 20rpx;
				color: #fff;
				font-size: 32rpx;
				width: 148rpx;
				height: 80rpx;
				border-radius: 48rpx;
				background: #1E6CEB;
			}
		}

	}

	.indexContainer {
		position: relative;

		.suspension {
			position: fixed;
			right: 15rpx;
			width: 96rpx;
			bottom: 140rpx;
			height: 96rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 126rpx;
			z-index: 999;
			filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

			.addIcon {

				width: 50rpx;
				height: 50rpx;
			}
		}

		.pointHead {
			.month {
				width: 85px;
				height: 28px;
				border-radius: 200rpx;
				background: #E7E7E7;
				color: #fff;
				text-align: center;
				line-height: 28px;
				color: #333;
			}

			.selectTime {

				.tab {
					margin-left: 20rpx;
					list-style-type: none;
					display: block;
					width: 68px;
					height: 28px;
					line-height: 28px;
					text-align: center;
					border: 1px solid #d9d9d9;
					border-radius: 200rpx;
				}

				.active {
					width: 68px;
					height: 28px;
					border-radius: 200rpx;
					background: #1890ff;
					color: #fff;
					text-align: center;
					line-height: 28px;
				}

				.orderStatus {
					width: 90px;
					height: 34px;
					text-align: center;
					line-height: 34px;
					font-weight: 700;

				}

				.filterDate {
					text-align: center;
					line-height: 34px;
					width: 90px;
					height: 34px;
					font-size: 14px;
					border-radius: 2px 0px 0px 2px;
					border: 1px solid #d9d9d9;
					border-right: none;
				}

				.ele-fluid {
					width: 300px !important;
				}
			}

		}

		.pointList {

			width: 710rpx;
			height: 140rpx;
			background-color: #fff;
			margin-top: 30rpx;
			margin-left: 20rpx;
			border-radius: 10rpx;
			padding: 24rpx;

			.pointName {
				color: #000;
				margin-bottom: 22rpx;
				font-family: Roboto;
				font-size: 32rpx;
			}

			.pointTime {
				color: #BEBEBE;
				margin-right: 25rpx;

				font-size: 24rpx;
			}

			.point {

				.pointImg {
					width: 52rpx;
					height: 12rpx;
					padding: 8rpx;
				}
			}
		}
	}
</style>